<template>
	<!-- 自定义多个选择器 -->
	<view>
		<picker v-if="show=='picker'" @change="pickerChange" :value="dqVal" :range="listArray" :range-key="label">
			<view class="pickerBtn">
				选择
			</view>
		</picker>
		<picker v-if="show=='picker3'" mode="multiSelector" @change="bindMultiPickerChange"
			@columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="listArray" :range-key="label">
			<view class="pickerBtn">
				选择
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// listArray: [
				// 	// 第一列值
				// 	[{
				// 		"label": "广州市",
				// 		"children": [{
				// 				"label": "天河区",
				// 				"cityCommunity": [{
				// 					"label": "林和街"
				// 				}, {
				// 					"label": "人民街"
				// 				}]
				// 			},
				// 			{
				// 				"label": "天河区2",
				// 				"cityCommunity": [{
				// 					"label": "林和街2"
				// 				}, {
				// 					"label": "人民街2"
				// 				}]
				// 			}
				// 		]
				// 	}, {
				// 		"label": "佛山市",
				// 		"children": [{
				// 			"label": "顺德区",
				// 			"cityCommunity": [{
				// 				"label": "顺德区街道"
				// 			}]
				// 		}, {
				// 			"label": "三水区",
				// 			"cityCommunity": [{
				// 				"label": "三水区街道"
				// 			}]
				// 		}]
				// 	}],
				// 	// 第二列值
				// 	[{
				// 		"label": "天河区",
				// 		"cityCommunity": [{
				// 			"label": "林和街"
				// 		}, {
				// 			"label": "人民街"
				// 		}]
				// 	}, {
				// 		"label": "天河区2",
				// 		"cityCommunity": [{
				// 			"label": "林和街2"
				// 		}, {
				// 			"label": "人民街2"
				// 		}]
				// 	}],
				// 	// 第三列值
				// 	[{
				// 		"label": "林和街"
				// 	}, {
				// 		"label": "人民街"
				// 	}]
				// ],
				multiIndex: [],
				valArr: [],
				dqVal: ""
			}
		},
		props: {
			show: {
				type: String,
				default: "picker"
			},
			listArray: {
				type: Array,
				default: () => {
					return []
				}
			},
			label: {
				type: String,
				default: "label"
			}
		},
		mounted() {

		},
		methods: {
			// 筛选地区改变
			pickerChange(e) {
				this.$emit("pickerChange", e.detail.value)
			},
			// value 改变时触发 change 事件
			bindMultiPickerChange(e) {
				console.log("触发", e.detail)
			},
			// 某一列的值改变时触发 columnchange 事件
			bindMultiPickerColumnChange(e) {
				// console.log(e.detail.column,e.detail.value)
				if (e.detail.column == 0) {
					this.listArray[1] = this.listArray[0][e.detail.value].children
					this.listArray[2] = this.listArray[1][0].cityCommunity
					this.valArr[0] = this.listArray[e.detail.column][e.detail.value].label
					this.valArr[1] = this.listArray[1][0].label
					this.valArr[2] = this.listArray[2][0].label
				}
				if (e.detail.column == 1) {
					this.listArray[2] = this.listArray[1][e.detail.value].cityCommunity
					this.valArr[1] = this.listArray[1][e.detail.value].label
					this.valArr[2] = this.listArray[2][0].label
				}
				if (e.detail.column == 2) {
					this.valArr[2] = this.listArray[2][e.detail.value].label
				}
				console.log(this.valArr)
			},
		}
	}
</script>

<style>
	.pickerBtn {
		padding: 10rpx 20rpx;
		background-color: #4285f4;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 24rpx;
	}
</style>